<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="ZhangBin">
    <meta name="Keywords" content="banner,3D,3DBanner,旋转木马,3D旋转木马,JS,Jquery">
    <meta name="Description" content="">
    <title>3D_Banner旋转木马</title>
    <link rel="shortcut icon" href="/static/img/Head.png" type="image/x-icon"/>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="bag"></div>
<div class="banner">
    <div class="btn">
        <img class="left" src="http://demo.zhangbin.xin/3d_banner_xzmm/image/left.png" width="45" height="45"/>
        <img class="right" src="image/right.png" width="45" height="45"/>
    </div>
    <div class="img">
        <ul>
            <li class="img_first"><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/1.jpg"/></li>
            <li class="img_second"><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/2.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/3.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/4.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/5.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/6.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/7.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/8.jpg"/></li>
            <li><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/9.jpg"/></li>
            <li class="img_last"><img src="http://demo.zhangbin.xin/3d_banner_xzmm/image/10.jpg"/></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="/static/plugins/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var width = [], height = [], zIndex = [], top_ = [], left_ = [], boxShadow = [], opacity = [];
    var clickTem = true;
    var transTime = 500;
    $(function () {
        var $lis = $(".banner .img ul li");
        $(".banner .btn").click(function (event) {
            if (!clickTem) {
                return false;
            }
            clickTem = false;
            setTimeout(function () {
                clickTem = true;
            }, transTime + 10)
            getImgProp($lis);
            startBanner($lis, $(event.target))

        })
    })

    //获取原始的图片属性及样式
    function getImgProp(lis) {
        for (var i = 0; i < lis.length; i++) {
            width[i] = lis.eq(i).width();
            height[i] = lis.eq(i).height();
            zIndex[i] = lis.eq(i).css("z-index");
            top_[i] = lis.eq(i).css("top");
            left_[i] = lis.eq(i).css("left");
            opacity[i] = lis.eq(i).css("opacity");
            boxShadow[i] = lis.eq(i).css("box-shadow");
        }
    }

    //调用轮播图
    function startBanner(lis, btn) {
        var a;
        for (var i = 0; i < lis.length; i++) {
            if ($(btn[0]).hasClass("left")) a = i + 1;
            if ($(btn[0]).hasClass("right")) a = i - 1;
            if (a > (lis.length - 1)) a = 0;
            if (a < 0) a = lis.length - 1;
            lis.eq(i).css("z-index", zIndex[a]);
            lis.eq(i).animate({
                width: width[a],
                height: height[a],
                top: top_[a],
                left: left_[a],
                opacity: opacity[a],
                boxShadow: boxShadow[a],
            }, transTime);
        }
    }
</script>
</body>
</html>
